<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美化后的对话界面</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            padding: 20px;
            max-width: 90%;
            margin: 50px auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .conversation {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-height: calc(80vh - 100px);
            overflow-y: auto;
            padding-bottom: 20px;
        }
        .msg {
            padding: 10px;
            border-radius: 5px;
            max-width: 70%;
        }
        .user {
            align-self: flex-end;
            background-color: #DCF8C6;
        }
        .assistant {
            align-self: flex-start;
            background-color: #E0E0E0;
        }
        .input-wrap {
            display: flex;
            margin-top: 1rem;
            justify-content: space-between;
        }
        #queryInput {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none;
            width: 100%;
            margin-bottom: 10px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
        }
        #submitBtn {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        #submitBtn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>智能对话助手</h1>
    <div id="chatContainer" class="conversation"></div>
    <div class="input-wrap">
        <textarea id="queryInput" placeholder="输入你的问题..."></textarea>
        <button id="submitBtn" onclick="submitQuery()">发送</button>
    </div>
</div>

<script>
    // 使用防抖(debounce)函数避免resize频繁触发
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    const handleResize = debounce(() => {
        const windowHeight = window.innerHeight;
        const container = document.querySelector('.conversation');
        container.style.maxHeight = `${windowHeight - 10}px`;
    }, 200);

    window.addEventListener('resize', handleResize);

    let chatHistory = [];

    function addMessage(role, text) {
        const msgDiv = document.createElement('div');
        msgDiv.className = `msg ${role}`;
        msgDiv.textContent = text;
        document.getElementById('chatContainer').appendChild(msgDiv);
        scrollChatToBottom();
    }

    function submitQuery() {
        const query = document.getElementById('queryInput').value.trim();
        if (!query) return;

        addMessage('user', query);
        chatHistory.push({ role: 'user', content: query });

        fetch('/AI/normal', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ question: query, history: chatHistory })
        })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                return response.text();
            })
            .then(data => {
                addMessage('assistant', data);
                chatHistory.push({ role: 'assistant', content: data });
            })
            .catch(err => addMessage('system', `发生错误: ${err.message}`));

        document.getElementById('queryInput').value = '';
    }

    function scrollChatToBottom() {
        document.getElementById('chatContainer').scrollTo(0, document.getElementById('chatContainer').scrollHeight);
    }
    handleResize();
</script>
</body>
</html>